﻿<!DOCTYPE html>
<html xmanifest="music.manifest">
<head>
<title>iUI Music Demo w/Tabs</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="icon" type="image/png" href="../../iui/iui-favicon.png">
<link rel="apple-touch-icon" href="../../iui/iui-logo-touch-icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="stylesheet" href="../../iui/iui.css" type="text/css" />
<link rel="stylesheet" title="Default" href="../../iui/t/default/default-theme.css"  type="text/css"/>
<link rel="alternate stylesheet" title="Default using Gradients" href="../../iui/t/defaultgrad/defaultgrad-theme.css"  type="text/css"/>
<link rel="alternate stylesheet" title="iPhoneDevCamp" href="../../iui/t/ipdc/ipdc-theme.css"  type="text/css"/>

<link rel="stylesheet" href="../../iui/ext-sandbox/iscroll/iui-iscroll.css" type="text/css" />

<script type="application/x-javascript" src="../../iui/iui.js"></script>
<script type="application/x-javascript">iui.animOn = true;</script>
<script type="application/x-javascript" src="../../iui/js/iui-theme-switcher.js"></script>
<script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iscroll.js"></script>
<script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iui-iscroll.js"></script>
<script type="application/x-javascript" src="music-app.js"></script>
</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
        <a class="button" href="#searchForm">Search</a>
    </div>
    
	<div id="artists" title="Artists" selected="true"><div class="wrapper"><div class="scroller">
    <ul>
        <li class="group">B</li>
        <li><a href="#TheBeatles">The Beatles</a></li>
        <li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li>
        <li class="group">C</li>
        <li><a href="#CrowdedHouse">Crowded House</a></li>
        <li class="group">J</li>
        <li><a href="#JennyLewis">Jenny Lewis</a></li>
        <li><a href="#JohnColtrane">John Coltrane</a></li>
        <li><a href="#JohnMayer">John Mayer</a></li>
        <li class="group">Z</li>
        <li><a href="#Zero7">Zero 7</a></li>
    </ul>
    </div></div></div>
    
	<div  id="TheBeatles" title="The Beatles"><div class="wrapper"><div class="scroller">
    <ul>
        <li><a href="#songs">Abbey Road</a></li>
        <li><a href="#songs">Help!</a></li>
        <li><a href="#songs">Rubber Soul</a></li>
        <li><a href="#songs">Sgt. Pepper's</a></li>
        <li><a href="#songs">White Album</a></li>
    </ul>
    </div></div></div>

	<div id="BelleSebastian" title="Belle &amp; Sebastian"><div class="wrapper"><div class="scroller">
    <ul >
        <li><a href="#songs">Boy With The Arab Strap</a></li>
        <li><a href="#songs">Dear Catastrophe Waitress</a></li>
        <li><a href="#songs">The Life Pursuit</a></li>
    </ul>
    </div></div></div>

	<div id="CrowdedHouse" title="Crowded House"><div class="wrapper"><div class="scroller">
    <ul>
        <li><a href="#songs">Crowded House</a></li>
        <li><a href="#songs">Temple of Low Men</a></li>
        <li><a href="#songs">Time on Earth</a></li>
        <li><a href="#songs">Together Alone</a></li>
        <li><a href="#songs">Woodface</a></li>
    </ul>
    </div></div></div>

	<div id="JennyLewis" title="Jenny Lewis"><div class="wrapper"><div class="scroller">
    <ul>
        <li><a href="#songs">White Rabbit Fur Coat</a></li>
    </ul>
    </div></div></div>

	<div id="JohnColtrane" title="John Coltrane"><div  class="wrapper"><div class="scroller">
    <ul>
        <li><a href="#songs">A Love Supreme</a></li>
        <li><a href="#songs">Giant Steps</a></li>
        <li><a href="#songs">Olé Coltrane</a></li>
        <li><a href="#songs">Quartet</a></li>
    </ul>
    </div></div></div>

	<div id="JohnMayer" title="John Mayer"><div class="wrapper"><div class="scroller">
    <ul>
        <li><a href="#songs">Continuum</a></li>
        <li><a href="#songs">Heavier Things</a></li>
        <li><a href="#songs">Room for Squares</a></li>
    </ul>
    </div></div></div>

	<div id="Zero7" title="Zero 7"><div class="wrapper"><div class="scroller">
    <ul>
        <li><a href="#songs">The Garden</a></li>
        <li><a href="#songs">Simple Things</a></li>
        <li><a href="#songs">When it Falls</a></li>
    </ul>
    </div></div></div>

	<div id="songs" title="Songs"><div class="wrapper"><div class="scroller">
    <ul>
        <li><a href="#player">Song 1</a></li>
        <li><a href="#player">Song 2</a></li>
        <li><a href="#player">Song 3</a></li>
        <li><a href="#player">Song 4</a></li>
        <li><a href="#player">Song 5</a></li>
        <li><a href="#player">Song 6</a></li>
        <li><a href="#player">Song 7</a></li>
        <li><a href="#player">Song 8</a></li>
        <li><a href="#player">Song 9</a></li>
        <li><a href="#player">Song 10</a></li>
        <li><a href="#player">Song 11</a></li>
    </ul>
    </div></div></div>
    
	<div id="player"  title="Now Playing"><div class="wrapper"><div class="scroller">
    <div  class="panel">
        <h2>If this weren't just a demo, you might be hearing a song...</h2>
    </div>
    </div></div></div>
    
	<form id="searchForm" class="dialog" action="search.gtpl" method="GET">
        <fieldset>
            <h1>Music Search</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <a class="button blueButton" type="submit">Search</a>
            
            <label>Artist:</label>
            <input id="artist" type="text" name="artist"/>
            <label>Song:</label>
            <input type="text" name="song"/>
        </fieldset>
    </form>
    
    <div id="tabbar">
    	<a href="music-more.html" target="_webapp"><img src="img/music-tab.png"/></a>
    </div>


</body>
</html>
